<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Links Network demo</title>

    <style>
      body {
        font: 10pt arial; 
      }
    </style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../network.js"></script>
    
    <script type="text/javascript">
      var nodesTable = null;
      var linksTable = null;
      var network = null;
      
      google.load('visualization', '1');
      
      // Set callback to run when API is loaded
      google.setOnLoadCallback(draw); 

      // Called when the Visualization API is loaded.
      function draw() {
        // Create and populate a data table.
        nodesTable = new google.visualization.DataTable();
        nodesTable.addColumn('number', 'id');
        nodesTable.addColumn('string', 'text');
        nodesTable.addColumn('string', 'group');
        nodesTable.addColumn('string', 'backgroundColor');  // overwrite backgroundColor for individual nodes
        
        nodesTable.addRow([1, 'black node', 'black', undefined]);
        nodesTable.addRow([2, 'black node', 'black', undefined]);
        nodesTable.addRow([3, 'black node', 'black', undefined]);
        nodesTable.addRow([4, 'red node', 'black', 'red']);
        nodesTable.addRow([5, 'gray node', 'gray', undefined]);
        nodesTable.addRow([6, 'gray node', 'gray', undefined]);
        nodesTable.addRow([7, 'gray node', 'gray', undefined]);
        nodesTable.addRow([8, 'gray node', 'gray', undefined]);
        nodesTable.addRow([9, 'image node', 'white', undefined]);
        nodesTable.addRow([10, 'image node', 'white', undefined]);
        nodesTable.addRow([11, 'default node', undefined, undefined]);
        nodesTable.addRow([12, 'default node', undefined, undefined]);        
        
        linksTable = new google.visualization.DataTable();
        linksTable.addColumn('number', 'from');
        linksTable.addColumn('number', 'to');        
        linksTable.addRow([1, 2]);
        linksTable.addRow([1, 3]);
        linksTable.addRow([1, 4]);
        linksTable.addRow([5, 6]);
        linksTable.addRow([5, 7]);
        linksTable.addRow([5, 8]);
        linksTable.addRow([9, 10]);
        linksTable.addRow([9, 11]);
        linksTable.addRow([9, 12]);
        
        linksTable.addRow([1, 5]);
        linksTable.addRow([5, 9]);
        linksTable.addRow([9, 1]);
        
        // specify options
        options = {
          'width': '600px',
          'height': '600px',
          'stabilize': false,
          'links': {
            'length': 120,
            'width': 2,
            'style': 'arrow',
            'color': 'gray'
          },
          'nodes': {
            // default for all nodes
            'fontFace': 'times',
            'style': 'circle',
            'borderColor': 'orange',
            'backgroundColor': 'yellow',
            'highlightColor': 'gold'
          },
          'groups': {
            'black': {
              // defaults for nodes in this group
              'radius': 15,
              'borderColor': 'black', 
              'backgroundColor': 'black', 
              'highlightColor': 'black',
              'fontColor': 'white',
              'fontSize': 18,
              'fontFace': 'courier',
              'style': 'rect'  
            },
            'gray': {
              'borderColor': 'black', 
              'backgroundColor': 'gray', 
              'highlightColor': 'gray',
              'fontSize': 18,
              'fontFace': 'arial',
              'style': 'circle'
            },
            'white': {
              'borderColor': 'black', 
              'backgroundColor': 'white', 
              'highlightColor': 'white',
              'fontColor': 'red',
              'style': 'image',
              'image': 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
            }
          }
        };

        // Instantiate our graph object.
        network = new links.Network(document.getElementById('mynetwork'));

        // Draw our graph with the created data and options 
        network.draw(nodesTable, linksTable, options);
      }
   </script>
  </head>

  <body>
    <div id="mynetwork"></div>
  </body>
</html>
